import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Image, Button } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './follow.less';

const goBack = () => {
  history.back();
}
const goPartner = () => {
  history.push('/partner');
}

export default function FollowPage() {
  return (
    <div className='follow'>
      <NavBar title='我的关注' leftText='返回' onClickLeft={goBack} />
      <div  className='follow-list'>
        <Flex align='center' justify='start' wrap='wrap' gutter={10}>
          <Flex.Item span={8}>
            <div className="follow-item">
              <div className="follow-avatar">
                <Image className="avatar-img" lazyload round width="48" height="48" fit="cover"
                       src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg" onClick={goPartner} />
              </div>
              <h3 className="follow-name" onClick={goPartner}>小熊</h3>
              <div className="follow-action">
                <Button plain type="primary" size="small" round>取消关注</Button>
              </div>
            </div>
          </Flex.Item>
          <Flex.Item span={8}>
            <div className="follow-item">
              <div className="follow-avatar">
                <Image className="avatar-img" lazyload round width="48" height="48" fit="cover"
                       src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg" onClick={goPartner} />
              </div>
              <h3 className="follow-name" onClick={goPartner}>小熊</h3>
              <div className="follow-action">
                <Button plain type="primary" size="small" round>取消关注</Button>
              </div>
            </div>
          </Flex.Item>
          <Flex.Item span={8}>
            <div className="follow-item">
              <div className="follow-avatar">
                <Image className="avatar-img" lazyload round width="48" height="48" fit="cover"
                       src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg" onClick={goPartner} />
              </div>
              <h3 className="follow-name" onClick={goPartner}>小熊</h3>
              <div className="follow-action">
                <Button plain type="primary" size="small" round>取消关注</Button>
              </div>
            </div>
          </Flex.Item>
          <Flex.Item span={8}>
            <div className="follow-item">
              <div className="follow-avatar">
                <Image className="avatar-img" lazyload round width="48" height="48" fit="cover"
                       src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg" onClick={goPartner} />
              </div>
              <h3 className="follow-name" onClick={goPartner}>小熊</h3>
              <div className="follow-action">
                <Button plain type="primary" size="small" round>取消关注</Button>
              </div>
            </div>
          </Flex.Item>
          <Flex.Item span={8}>
            <div className="follow-item">
              <div className="follow-avatar">
                <Image className="avatar-img" lazyload round width="48" height="48" fit="cover"
                       src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg" onClick={goPartner} />
              </div>
              <h3 className="follow-name" onClick={goPartner}>小熊</h3>
              <div className="follow-action">
                <Button plain type="primary" size="small" round>取消关注</Button>
              </div>
            </div>
          </Flex.Item>
          <Flex.Item span={8}>
            <div className="follow-item">
              <div className="follow-avatar">
                <Image className="avatar-img" lazyload round width="48" height="48" fit="cover"
                       src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg" onClick={goPartner} />
              </div>
              <h3 className="follow-name" onClick={goPartner}>小熊</h3>
              <div className="follow-action">
                <Button plain type="primary" size="small" round>取消关注</Button>
              </div>
            </div>
          </Flex.Item>
        </Flex>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
